<template>
  <div v-if="showList.length > 0">
    <div class="dcHead">
      <div class="topTab">
        <span
          v-if="showList.indexOf('1') > -1"
          :class="type == '1' ? 'on' : ''"
        >{{ translate("dingchang") }}</span>
        <span
          v-if="showList.indexOf('2') > -1"
          :class="type == '2' ? 'on' : ''"
        >{{ translate("goupiao") }}</span>
      </div>
      <div class="right">{{ translate("ckgd") }}</div>
    </div>
    <template>
      <div v-if="lxList && lxList.length > 0" class="lxTab">
        <div
          v-for="(item, index) in lxList"
          :key="index"
          :class="index === 0 ? 'on' : ''"
          class="item"
        >
          {{ item.projectName }}
        </div>
      </div>
      <div class="box_list">
        <div v-for="(item, index) in list" :key="index" class="box">
          <div v-if="contentType == 1" class="left">
            <div>{{ item.weekDay }}</div>
            <div v-if="item.date">{{ item.date.slice(5, 10) }}</div>
          </div>
          <img v-if="contentType != 1" :src="item.icon" class="left img">
          <div class="right">
            <div class="bt">{{ item.title }}</div>
            <div class="sm">
              <template v-if="type == '1' && contentType == '2'">
                {{ item.num || 0 }}{{ translate("gcd") }}
              </template>
              <template v-else>
                <span
                  class="secondColor"
                >{{ translate("renminbi") }}{{ item.price || 0 }}</span>
                <span>{{ translate("rise") }}</span>
              </template>
            </div>
            <div class="btn">{{ type == "1" ? translate('goupiao') : translate('dingchang') }}</div>
          </div>
        </div>
        <div v-if="list.length === 0" class="no-order">
          <img :src="miniConfig.path + '/default_nodata.png'">
          <div>{{ translate("zwsj") }}</div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { getMiniVenuePicket, getProjectList } from '@/api'
export default {
  props: {
    venueConfig: {
      type: Object,
      default: () => ({})
    },
    venueInfo: {
      type: Object,
      default: () => ({})
    },
    glaboConfig: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      showList: [],
      miniConfig: {},
      contentType: '',
      type: '',
      lxList: [{ projectName: 'ce1' }, { projectName: 'ce1' }, { projectName: 'ce1' }, { projectName: 'ce1' }, { projectName: 'ce1' }],
      list: [{
        date: '21312321'
      }, {
        date: '21312321'
      }, {
        date: '21312321'
      }]
    }
  },
  watch: {
    venueConfig: function() {
      if (this.venueConfig.param) {
        this.showList = this.venueConfig.param.split(',')
      } else {
        this.showList = []
      }
      this.contentType = this.venueConfig.style
      this.type = this.showList.length > 1 ? '1' : this.showList.length > 0 ? this.showList[0] : ''
      this.getProject()
    },
    glaboConfig: {
      handler: function(newValue) {
        this.miniConfig = newValue
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
  },
  methods: {
    getProject() {
      getProjectList({
        param: {
          venueId: this.venueInfo.id,
          status: '1',
          type: this.type - 1
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          if (this.contentType === '2') {
            this.lxList = [{
              projectName: this.translate('all'),
              id: ''
            }, ...res.recordList]
          } else {
            this.lxList = res.recordList
          }
          this.getList()
        }
      }).catch(() => { })
    },
    getList() {
      const projectId = this.lxList[0].id || ''
      getMiniVenuePicket({
        param: {
          style: this.type,
          contentType: this.contentType,
          projectId,
          venueId: this.venueInfo.id
        },
        pagination: {
          rows: 10,
          page: 1
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          this.list = res.recordList || []
        }
      }).catch(() => { })
    }

  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.dcHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
  line-height: 88px;
  height: 88px;

  .topTab {
    width: 230px;

    span {
      font-size: 30px;
      margin: 0 22px;
      display: inline-block;
      &:first-of-type {
        margin-left: 0;
      }

      &.on {
        color: #222222;
        font-weight: bolder;
        position: relative;
        border-bottom: 6px solid $Color;
      }
    }
  }

  .right {
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
}

.lxTab {
  width: 100%;
  overflow-x: auto;
  display: flex;
  padding: 30px 0 20px;
  .item {
    flex-shrink: 0;
    font-size: 26px;
    color: #333333;
    padding: 0 20px;
    line-height: 52px;
    border-radius: 30px;
    border: 1px solid #e5e5e5;
    margin-right: 20px;
    &:last-of-type {
      margin-right: 0;
    }
    &.on {
      border-color: $Color;
      background-color: $Color;
      color: #fff;
    }
  }
}
.box_list {
  max-height: 520px;
  overflow: auto;
}
.box {
  margin-bottom: 30px;
  display: flex;
  align-items: center;

  &:last-of-type {
    margin-bottom: 0;
  }

  .left {
    width: 88px;
    height: 88px;
    flex: none;
    background-color: $Color2;
    margin-right: 24px;
    display: flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.5;
    font-size: 26px;

    &.img {
      background: none;
      border-radius: 50%;
    }
  }

  .right {
    position: relative;
    height: 88px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;

    .bt {
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
    }

    .sm {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;

      text {
        font-size: 30px;
        margin-right: 5px;
      }
    }

    .btn {
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      display: inline-block;
      color: $Color;
      line-height: 52px;
      border-radius: 30px;
      width: 112px;
      border: 1px solid $Color;
      text-align: center;
      position: absolute;
      right: 0;
      top: 52%;
      margin-top: -26px;
    }
  }
}
</style>
